//- Copyright (c) 2016 Lucky Byte, Inc.
extends ../layout

append scripts
  script(src="/js/i/096.js")

append css
  style(type="text/css").
    .ui.label.link {
      margin-top: 1px;
      padding-left: 6px;
      padding-right: 6px;
      padding-top: 3px;
      padding-bottom: 4px;
    }

mixin floated_label(disabled)
  .right.floated.content
    if disabled
      .ui.label.orange.small.link 已禁用
    else
      .ui.label.green.small.link 已启用

block content
  .ui.grid.nomargin(style="margin-left: 10px; margin-top: 14px;")
    .column.three.wide
      .ui.raised.segment.nolayout.teal
        .ui.label.ribbon.large.teal(
          style="padding-left:4px; padding-right:6px;")
          i.icon.laptop
          | #{host.name.substring(0,15)}
        .ui.divided.relaxed.small.middle.aligned.list
          .item
            +floated_label(mode_1_disabled)
            i.icon.green(style="padding-top:2px;"
              class="#{mode == 1 ? 'arrow right' : ''}")
            .content(style="padding-top:2px;")
              a(href="/i/096/1") 透传模式
          .item
            +floated_label(mode_2_disabled)
            i.icon.green(style="padding-top:2px;"
              class="#{mode == 2 ? 'arrow right' : ''}")
            .content(style="padding-top:2px;")
              a(href="/i/096/2") 重组模式

    .column.thirteen.wide
      form.ui.form.segment.padded.main(action="/i/096/edit/#{mode}" method="post"
        data-disabled="#{record.disabled}"
        style="margin-left:0px !important;")
        input(type="hidden" name="serial" value="#{record.serial}")
        input(type="hidden" name="uuid" value="#{record.uuid}")

        h4.ui.dividing.header(style="margin-top:0px;")
          i.caret.down.icon.link.grey.accordion
          | 服务配置

        .fields
          .field.six.wide.required
            label 监听地址:
              - var help = "如果通过 TPDU 网控代理，设置为 <em>主机内网地址</em>；<br/>"
              - help += "如果通过外网连接，设置为 <em>主机公网地址</em> 或 <em>所有接口</em>；"
              i.icon.help.blue(
                data-html="#{help}" data-variation="small very wide")
            .ui.dropdown.selection.input.listen_addr
              input(type="hidden" name="listen_addr" value="#{record.listen_addr}")
              i.icon.dropdown
              .default.text 必填
              .menu
                .item(data-value="1") 所有接口
                  .right.floated(style="color:#888;") 0.0.0.0
                .item(data-value="2") 环回接口
                  .right.floated(style="color:#888;") 127.0.0.1
                .item(data-value="3") 主机公网地址
                  .right.floated(style="color:#888;")= host.ipaddr
                .item(data-value="4") 主机内网地址
                  .right.floated(style="color:#888;")= host.ipaddr_priv
          .field.two.wide.required
            label 监听端口:
            .ui.input
              input(type="text" name="listen_port" placeholder="必填"
                value="#{record.listen_port}")
          .field.two.wide.required
            label 通讯超时(秒):
            .ui.input
              input(type="text" name="timeout" placeholder="必填"
                value="#{record.timeout}")

        h4.ui.dividing.header
          i.caret.down.icon.link.grey.accordion
          | 备注信息

        .fields
          textarea(name="notes" type="text" rows="3"
            placeholder="在此输入备忘信息")= record.notes || ''

        .ui.buttons(style="margin-top:40px;")
          if record.disabled
            if page_perms.disable
              button.ui.orange.button#disable(type="button"
                data-disabled="true" data-mode="#{mode}"
                data-action="/i/096/disable/#{mode}") 启 用
            else
              button.ui.orange.button.disabled#disable(type="button"
                data-disabled="true" data-mode="#{mode}")
                i.icon.ban.grey
                | 启 用
          else
            if page_perms.disable
              button.ui.orange.button#disable(type="button"
                data-disabled="false" data-mode="#{mode}"
                data-action="/i/096/disable/#{mode}") 禁 用
            else
              button.ui.orange.button.disabled#disable(type="button"
                data-disabled="false" data-mode="#{mode}")
                i.icon.ban.grey
                | 禁 用

          button.ui.yellow.button#cancel(type="button"
            onclick="window.location = '/i'") 取 消

          if page_perms.edit
            button.ui.green.button#ok(type="submit") 确 定
          else
            button.ui.green.button.disabled#ok(type="submit")
              i.icon.ban.grey
              | 确 定
